<template>
    <div class="app-container home">
        <el-row :gutter="20">
            <el-col :sm="24" :lg="12">
                <el-card class="update-log">
                    <template #header>
                        <div class="clearfix">
                            <span>
                                <h3>年度证书赛事分类统计图</h3>
                            </span>
                        </div>
                    </template>
                    <game-type-year></game-type-year>
                </el-card>

                <hr />
            </el-col>
            <el-col :sm="24" :lg="12">
                <el-card class="update-log">
                    <template #header>
                        <div class="clearfix">
                            <div class="inneradd">
                                <span class="float-left">
                            <!-- 证书赛事数量统计图(按获奖时间统计) -->
                      <h3>证书赛事数量统计图(按获奖时间统计)</h3>
                      </span>
                      <div class="float-right">
                                    <el-date-picker v-model="daterangeAcquisitionTime"  size="large" style="width: 320px;" value-format="YYYY-MM-DD"
                                        type="daterange" @change="daterangeAcquisitionTimeChange()" range-separator="-"
                                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                        </div>
                         
                        </div>
                        </div>
                    </template>
                    <certificate-increase ref="certificateIncreaseRef"></certificate-increase>
                </el-card>

                <hr />
            </el-col>
        </el-row>

        <el-divider />
        <el-row :gutter="20">

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <template #header>
                        <div class="clearfix">
                            <div class="inneradd">
                                <span class="float-left">
                                    证书获奖等级分布图
                                    <el-date-picker v-model="certificateRankYearTime"  size="small" style="width: 120px;" type="year"
                                    value-format="YYYY-MM-DD"
                                        @change="certificateYearTimeChange(1)" placeholder="年份" />
                                </span>

                                <div class="float-right">
                                    <!-- <el-date-picker v-model="certificateRankYearTime" type="year"
                                    value-format="YYYY-MM-DD"
                                        @change="certificateYearTimeChange(1)" placeholder="年份" /> -->
                                </div>
                            </div>
                        </div>
                    </template>
                    <certificate-rank ref="certificateYearTimeRef"></certificate-rank>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <template #header>
                        <div class="clearfix">
                            <div class="inneradd">
                            <span class="float-left">
                                证书类型分布图
                                 <el-date-picker  size="small" style="width: 120px;" v-model="certificateTypeYearTime" type="year"
                                    value-format="YYYY-MM-DD"
                                        @change="certificateYearTimeChange(2)" placeholder="年份" />
                            </span>
                                <div class="float-right">
                                 <!--    <el-date-picker v-model="certificateTypeYearTime" type="year"
                                    value-format="YYYY-MM-DD"
                                        @change="certificateYearTimeChange(2)" placeholder="年份" /> -->
                                </div>
                        </div>
                        </div>
                    </template>
                    <certificate-rank ref="certificateTypeYearTimeRef"></certificate-rank>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="8">
                <el-card class="update-log">
                    <template #header>
                        <div class="clearfix">
                            <div class="inneradd">
                            <span class="float-left">
                               证书赛事类别分布图 
                                <el-date-picker style="width: 120px;" size="small" v-model="gameTypeYearTime" type="year"
                                    value-format="YYYY-MM-DD"
                                        @change="certificateYearTimeChange(3)" placeholder="年份" />
                            </span>
                            <div class="float-right">
                                   
                                </div>
                        </div>
                    </div>
                    </template>
                    <certificate-rank ref="gameTypeYearTimeRef"></certificate-rank>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance() as any;
import GameTypeYear from "@/views/commendation/game-type-year/index.vue";
import CertificateIncrease from "@/views/commendation/certificate-increase/index.vue";
import CertificateRank from "@/views/commendation/certificate-rank/index.vue";

// 父组件需要传递时间参数给子组件
const daterangeAcquisitionTime = ref<any>([]);
const name = ref("index");
const version = ref("3.8.3");
const certificateIncreaseRef = ref()
import dayjs from 'dayjs';
import { number } from "echarts";

// 查询参数
const queryParams = ref({
    beginTime: "",
    endTime: "",
});

const daterangeAcquisitionTimeChange = () => {
    if (daterangeAcquisitionTime.value) {
        const startDate = dayjs(daterangeAcquisitionTime.value[0]);
        const endDate = dayjs(daterangeAcquisitionTime.value[1]);
        const duration = endDate.diff(startDate, 'day');
        if (duration > 60) {
            // 时间范围超过60天，进行相应的处理
            proxy.$modal.msgError("开始时间和结束时间不能超过60天");
            daterangeAcquisitionTime.value = [];
        } else {
            queryParams.value.beginTime = daterangeAcquisitionTime.value[0];
            queryParams.value.endTime = daterangeAcquisitionTime.value[1];
            certificateIncreaseRef.value?.certificateIncreaseReq(queryParams.value);
        }
    }
}

// 证书等级分布图
const certificateRankYearTime = ref<any>([]);
const certificateYearTimeRef = ref()
// 证书类型分布图
const certificateTypeYearTime = ref<any>([]);
const certificateTypeYearTimeRef = ref();
// 赛事类别分布图
const gameTypeYearTime = ref<any>([]);
const gameTypeYearTimeRef = ref();

// 查询参数
const queryYearParams = ref({
    year: "",
    certificateType:0,
});

const certificateYearTimeChange = (typeParam:number) => {
    console.log("开始==="+certificateRankYearTime+"类型=="+typeParam);

    switch(typeParam) {
    case 1:
      // 执行 typeParam 为 1 的逻辑 
    if (certificateRankYearTime.value) {
        queryYearParams.value.year = certificateRankYearTime.value;
        queryYearParams.value.certificateType = typeParam;
        console.log("certificateYearTime然后"+JSON.stringify(queryYearParams.value));
        certificateYearTimeRef.value?.certificateRankReq(queryYearParams.value);
    }
      break;
    case 2:
      // 执行 typeParam 为 2 的逻辑
      if (certificateTypeYearTime.value) {
        queryYearParams.value.year = certificateTypeYearTime.value;
        queryYearParams.value.certificateType = typeParam;
        console.log("certificateYearTime然后"+JSON.stringify(queryYearParams.value));
        certificateTypeYearTimeRef.value?.certificateRankReq(queryYearParams.value);
    }
      break;
    case 3:
      // 执行 typeParam 为 3 的逻辑
      if (gameTypeYearTime.value) {
        queryYearParams.value.year = certificateTypeYearTime.value;
        queryYearParams.value.certificateType = typeParam;
        console.log("certificateYearTime然后"+JSON.stringify(queryYearParams.value));
        gameTypeYearTimeRef.value?.certificateRankReq(queryYearParams.value);
    }
      break;
    default:
      // 默认情况下执行的逻辑
      break;
  }

}

onMounted(() => {
    certificateYearTimeChange(1);
    certificateYearTimeChange(2);
    certificateYearTimeChange(3);
})

</script>

<style scoped lang="scss">
.home {
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }

    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}



.inneradd {
    overflow: auto;
}

.inneradd::after {
    content: "";
    display: table;
    clear: both;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}
</style>

